<template>
	<div class="agent-id-mark-container">
		<el-dialog :visible.sync="showAgentMark" width="30%" :show-close="false" custom-class="mark-container-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
			<div slot="title" class="dialog-title">
				<span class="text">坐席ID水印配置</span>
				<!-- <el-switch v-model="markStatus" @change="switchPreview"> </el-switch> -->
			</div>
			<div class="icon"></div>
			<div class="agnent-mark-video-box">
				<p class="agnet-no" :class="radio" v-show="radio">A001</p>
				<!-- <MediaStream ref="mediaBox" v-if="markStatus" /> -->
				<div class="black-box">
					<!-- <p v-show="!radio">暂无画面</p> -->
				</div>
			</div>
			<div class="radio-box">
				<p>选择工号展示位置：</p>
				<el-radio-group v-model="radio" @change="changeRadio(radio)">
					<div>
						<el-radio :label="'nw'">左上方</el-radio>
						<el-radio :label="'n'">正上方</el-radio>
						<el-radio :label="'ne'">右上方</el-radio>
					</div>
					<div style="margin-top: 10px">
						<el-radio :label="'sw'">左下方</el-radio>
						<el-radio :label="'s'">正下方</el-radio>
						<el-radio :label="'se'">右下方</el-radio>
					</div>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="ok">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import MediaStream from '@/views/components/MediaStream.vue';
export default {
	components: {
		MediaStream
	},
	props: {
		showAgentMark: {
			type: Boolean,
			default: () => false,
			required: true
		},
		agnetRadio: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			markStatus: false,
			radio: ''
		};
	},
	mounted() {
		this.radio = this.agnetRadio;
	},
	methods: {
		cancel() {
			if (this.markStatus) {
				this.$refs.mediaBox.stopLocalStream();
				this.markStatus = false;
			}
			this.$emit('cancel');
		},
		ok() {
			if (this.markStatus) {
				this.$refs.mediaBox.stopLocalStream();
				this.markStatus = false;
			}
			if (!this.radio) {
				this.$message.error('请选择坐席 ID 水印显示位置');
				return;
			}
			let data = { value: { position: this.radio } };
			this.$emit('ok', data);
		},
		async switchPreview() {
			if (!this.markStatus) {
				this.$refs.mediaBox.stopLocalStream();
			} else {
				this.$nextTick(async () => {
					let stream = await this.$refs.mediaBox.getUserMedia();
					if (!stream) {
						this.markStatus = !this.markStatus;
						return;
					}
				});
			}
		},
		changeRadio() {}
	}
};
</script>

<style lang="less" scoped>
.agent-id-mark-container {
	.dialog-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.agnent-mark-video-box {
		.black-box {
			background: url('../../assets/img/agentIdMark.png') no-repeat;
			width: 420px;
			height: 367px;
			// background: #ffffff;
			border-radius: 2px;
			p {
				text-align: center;
				height: 12px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #cccccc;
				line-height: 180px;
				margin-top: 4px;
			}
		}
	}

	.black-box,
	.agnent-mark-video-box {
		position: relative;
		border-radius: 8px;
		overflow: hidden;
		width: 320px;
		height: 180px;
		// background-color: #000;
	}
	.radio-box {
		color: #333;
		p {
			padding: 15px 0;
		}
	}
	.text {
		color: #333;
	}
	.agnet-no {
		position: absolute;
		color: #fff;
		z-index: 100;
	}
	.nw {
		top: 10px;
		left: 10px;
	}
	.n {
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.ne {
		right: 70px;
		top: 10px;
	}
	.sw {
		left: 10px;
		bottom: 40px;
	}
	.s {
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
	}
	.se {
		right: 70px;
		bottom: 40px;
	}
}
</style>

<style lang="less">
.agent-id-mark-container {
	.el-dialog__header {
		border-bottom: 1px solid #e5e5ea;
	}
}
</style>
